<template>
  <div>
    <el-form class="p-form" ref="form" :model="form" label-position="left" label-width="130px">
      <el-form-item label="镜像类型">
        <el-radio-group v-model="form.field1">
          <el-radio label="系统盘镜像"></el-radio>
          <el-radio label="数据盘镜像"></el-radio>
          <el-radio label="ISO镜像"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="镜像类别">
        <el-select size="small" class="w233" v-model="form.field2" placeholder="请选择镜像类别">
          <el-option v-for="(item) in option2" :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="源">
        <el-radio-group v-model="form.field3" @change="usabelChange">
          <!-- <el-radio-button label="虚拟机"></el-radio-button> -->
          <el-radio-button label="镜像文件"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="虚拟机" v-show="form.field3==='虚拟机'">
        <div class="role-desbox">
          <el-select size="small" class="w233 mr40" v-model="form.field4" placeholder="请选择运行状态">
            <el-option v-for="(item) in option" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input size="small" style="width:233px" suffix-icon="el-icon-search" v-model="form.field5" placeholder="请输入ID/名称"></el-input>
          <div class="mt20">
            <div class="esclist esclist-t">
              <div class="e-item">名称</div>
              <div class="e-item">操作系统</div>
              <div class="e-item">运行状态</div>
              <div class="e-item">CPU架构</div>
              <div class="e-item">启动方式</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.field6" label="1" style="margin-right: 10px;">{{ '' }}</el-radio>4U64G</div>
              <div class="e-item e-item-2">CentOS 7.6.64bit</div>
              <div class="e-item e-item-2">运行中</div>
              <div class="e-item e-item-2">X86</div>
              <div class="e-item e-item-2">BIOS</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.field6" label="2" style="margin-right: 10px;">{{ '' }}</el-radio>4U64G</div>
              <div class="e-item e-item-2">win7/2003/2008</div>
              <div class="e-item e-item-2">运行中</div>
              <div class="e-item e-item-2">X86</div>
              <div class="e-item e-item-2">BIOS</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.field6" label="3" style="margin-right: 10px;">{{ '' }}</el-radio>4U64G</div>
              <div class="e-item e-item-2">suse10/11</div>
              <div class="e-item e-item-2">运行中</div>
              <div class="e-item e-item-2">X86</div>
              <div class="e-item e-item-2">BIOS</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.field6" label="4" style="margin-right: 10px;">{{ '' }}</el-radio>4U64G</div>
              <div class="e-item e-item-2">ubuntu10/14</div>
              <div class="e-item e-item-2">运行中</div>
              <div class="e-item e-item-2">X86</div>
              <div class="e-item e-item-2">BIOS</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.field6" label="5" style="margin-right: 10px;">{{ '' }}</el-radio>4U64G</div>
              <div class="e-item e-item-2">redhat</div>
              <div class="e-item e-item-2">运行中</div>
              <div class="e-item e-item-2">X86</div>
              <div class="e-item e-item-2">BIOS</div>
            </div>
            <div class="flex-c" style="margin-top: 10px;line-height: 20px;"><div style="margin-right: 50px;">已选虚拟机 </div><div>名称 |操作系统</div></div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="镜像文件" v-show="form.field3==='镜像文件'">
        <div class="role-desbox">
          <el-input size="small" style="width:233px" suffix-icon="el-icon-search" v-model="form.field7" placeholder="请输入桶名称"></el-input>
          <div class="mt20">
            <div class="esclist esclist-t">
              <div class="e-item">名称</div>
              <div class="e-item">存储类别</div>
              <div class="e-item">创建时间</div>
            </div>
            <div class="esclist">
              <div class="e-item e-item-2">4vCPUs</div>
              <div class="e-item e-item-2">低频访问存储</div>
              <div class="e-item e-item-2">20223-2-1 12:12:12</div>
            </div>
            <div class="btntext">新建桶</div>
          </div>
        </div>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="架构类型">
        <el-radio-group v-model="form.field8">
          <el-radio label="X86"></el-radio>
          <el-radio label="ARM"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="启动方式">
        <el-radio-group v-model="form.field9">
          <el-radio label="BIOS"></el-radio>
          <el-radio label="数据盘镜像"></el-radio>
          <el-radio label="UEFI"></el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="操作系统">
        <el-select size="small" style="width:267px;margin-right: 80px;" v-model="form.field10" placeholder="请选择操作系统">
          <el-option v-for="item in option5" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select size="small" style="width:267px;" v-model="form.field11" placeholder="请选择操作系统版本">
          <el-option v-for="item in option6" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="系统盘">
        <div style="min-height: 120px;">
          <div class="flex-c">
            <el-input-number size="small" style="width:215px" v-model="form.field13" :min="1" :max="200"></el-input-number>GB
          </div>
          <div class="flex-c">
            <pbtn class="mr15" @click="hasTag=true"></pbtn>
            <div>增加一块数据盘</div>
            <div class="explain">您还可以增加59块云硬盘</div>
          </div>
          <div class="flex-c" v-show="hasTag">
            <pbtn class="mr15" @click="delTag" iname="minus"></pbtn>
            <el-select size="small" class="w233 mr60" v-model="form.field14" placeholder="请选择系统盘类型">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="mr40"><el-input-number size="small" class="w215 mr3" v-model="form.field15" :min="1"></el-input-number>GB</div>
            <div style="margin-left: 40px;">
              数量: <el-input-number size="small" class="w215" v-model="form.field16" :min="1"></el-input-number>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="名称">
        <el-input size="small" style="width:233px" v-model="form.field17" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input class="w440" type="textarea" :autosize="{ minRows: 3}" v-model="form .field18" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hasTag: false,
        form: {
          field1:'系统盘镜像',
          field2:'',
          field3:'镜像文件',
          field4:'',
          field5:'',
          field6:'1',
          field7:'',
          field8:'X86',
          field9:'BIOS',
          field10:'',
          field11:'',
          field12:'',
          field13:1,
          field14:'',
          field15:1,
          field16:1,
          field17:'',
          field18:'',
          field19:'',
        },
        option:[
          
        ],
        option2:[
          {label:'操作系统',value:'操作系统'},
          {label:'数据库与缓存',value:'数据库与缓存'},
          {label:'应用运行环境',value:'应用运行环境'},
          {label:'管理与监控',value:'管理与监控'},
          {label:'网络与安全',value:'网络与安全'},
          {label:'开发语言环境',value:'开发语言环境'},
          {label:'中间件等',value:'中间件等'},
        ],
        option5:[
          {label:'CentOS',value:'CentOS'},
          {label:'Ubuntu',value:'Ubuntu'},
          {label:'Windows',value:'Windows'},
        ],
        option6:[
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'CentOS'},
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'Ubuntu'},
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'Windows'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      usabelChange(val) {
        this.form.pcClass = ''
        this.form.pcType = ''
      },
      getName(){
        return this.form.field8
      },
    }

  }
</script>

<style scoped lang="less">
  .p-form {
    /deep/.el-form-item__label {
      font-size: 16px;
      font-family: 'PingFang SC ', 'PingFang SC';
      font-weight: 650;
      font-style: normal;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
  }

  .addnum {
    display: flex;

    .explain {
      margin-left: 10px;
      line-height: 50px;
      font-size: 12px;
      color: #AAAAAA;
    }
  }

  .form-br {
    height: 1px;
    background-color: #ebebeb;
    width: 100%;
    margin-bottom: 15px;
  }

  .role-desbox {
    width: 932px;
    min-height: 125px;

    .escplasin {
      margin-left: 10px;
      font-size: 12px;
      color: #AAAAAA;
    }

    .esclist {
      height: 50px;
      display: flex;
      align-items: center;

      div {
        color: #333333;
        width: 160px;
        text-align: center;
      }
    }

    .esclist-t {
      height: 35px;
      background-color: rgba(242, 242, 242, 1);
    }

  }

  .tag-btn {
    margin-right: 15px;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px #1890FF solid;
    border-radius: 50%;
    color: #1890FF;

    &:hover {
      background-color: #1890FF;
      color: #ffffff;
    }
  }

  /deep/.el-radio-button {

    border-radius: 4px;
    overflow: hidden;
  }

  /deep/.el-radio-button {
    .el-radio-button__inner {
      background-color: rgba(188, 223, 255, 1);
      color: #716E6E;
      font-size: 16px;
    }

    &.is-active {
      .el-radio-button__inner {
        background-color: #1890FF;
        color: #ffffff;

      }
    }
  }

  .pcarea3 {
    font-size: 12px;
    color: #FF3636;
  }
</style>
